<template>
  <a-carousel class="menus-carousel">
    <div v-for="(item, index) in list" :key="index">
      <div class="menus-item-list">
        <span class="menu-item" v-for="(menu, key) in item" :key='key'>
          <LazyImage :item="menu" @click="menuJump(menu)"></LazyImage>
          <p>{{menu.name}}</p>
        </span>
      </div>
    </div>
  </a-carousel>
</template>

<script>

import {
  Carousel,
} from 'ant-design-vue'

import LazyImage from '@components/lazyImage';

export default {
  name: 'swiper-banner',
  components: {
    [Carousel.name]: Carousel,
    LazyImage
  },
  props: {
    menus: Array,
  },
  data() {
    return{}
  },
  computed: {
    list() {
      return Object.values(this.menus.reduce( (res, item, index) => {
        res[Math.floor(index/10)] ? res[Math.floor(index/10)].push(item) : res[Math.floor(index/10)] = [item]
        return res
      }, {}))
    }
  },
  methods: {
    menuJump(item) {
      console.log(item);
      
    }
  }
}
</script>

<style lang="less" scoped>
.menus-carousel {
  /deep/ .slick-list{
    height: 176px;
  }
}
.menus-item-list {
  display: flex;
  flex-wrap: wrap;
  .menu-item {
    flex: 0 0 20%;
    text-align: center;
    padding: 0 5px;
    .a-image {
      display: block;
      margin: 0 auto 5px;
      width: 46px;
      height: 46px;
      img {
        background-color: #fff;
      }
    }
  }
}

</style>